import React, { Component } from 'react';
import PropTypes from 'prop-types';
import './index.less';
import {Icon, Modal} from 'antd-mobile';
import client from 'UTIL/native';
import {detectmob} from 'UTIL/commonUtil';
const alert = Modal.alert;

class CommonHeader extends Component {
	static contextTypes = {
		router: PropTypes.object.isRequired
	}
  constructor(props) {
    super(props);
    this.state = {
    	contents:{
//				"@back":<Icon type='left' size='lg' onClick={this.back.bind(this)} style={{lineHeight:`.7rem`,height:`.86rem`}}/>,
			"@back":<img id="backIcon" onClick={this.backs.bind(this)} src="./imgs/iconfont-6.png" />,
			"@exit":"退出",
			"@index":"返回首页",
			"@shiftLangEn":"English",
			"@shiftLangZh":"中文版",
			"@menu":"菜单<img src='images/icon_r/i_r38.png'/>",
			"@login":"登录",
			"@collect":"我的收藏",
            "@share":"分享",
			"@register":"注册",
			"@help":"帮助",
			"@set":"<img src='images/icon_r/i_r38.png' class='my_set'/>",
			"@cancel":"取消",
			"@search":"<img src='images/icon_r/search.png' class='my_set'/>",
			"@mine" : "<img src='images/main/mine-icon.png' class='my_set'/>",
			"@help":"帮助"
			}
    }
    client();
   }

	getDefaultProps = {
		name: '交通银行',
		img:'',
		action: 'back',
		rightContentTitle: '我的收藏',
		rightAction: '',
		leftContent: '返回'
	}

  componentWillMount() {
  	var _this = this;
	window.native.backHistory = function(){
		_this.backs()
	};
  }
  backs() {

  	let url = window.location.toString();
  	
  	let backAction = this.props.leftAction || '';
  	if(backAction){
  		backAction();
  		return false;
  	}else{
  		window.history.back(-1);  	
       	return false;
  	}

  	
  }

  render() {
  	let {contents} = this.state;
  	let {rightAction,rightContentTitle,leftContentTitle, leftContent, name} = this.props;
  	let rightFn =  rightAction || '';
  	let rightTitle =  contents[rightContentTitle] || rightContentTitle;
  	let leftTitle =  contents[leftContentTitle] || leftContentTitle;
  	

  	if(leftTitle == '@back'){
  		//alert('back')
  	}

		return (
			<div className='header'>
     		    {leftTitle}
     		    <div className = "loginStateHeader" 
     		    	onClick={this.backs.bind(this)}>
     		    	{leftContent}
     		    </div>
				<div className="header_title">

					<span>{name} </span>

				</div>
				<div className="rightContent" 
					style={{
						color:'#108ee9'
					}}
					onClick={rightFn} >
					{rightTitle}
				</div>
			</div>
		)

  }
}

export default CommonHeader;